
<template>
    <div style="width: 100%;height:600px;overflow: auto" id="big">
        <div style="float: left;position: fixed;z-index: 100">
            <el-row>
                <el-col :span="14">
                    <el-input type="number" placeholder="请输入内容" v-model="transformInput" @blur="onTransformInput">
                        <template slot="append">%</template>
                    </el-input>
                </el-col>
                <el-col :span="10">
                    <el-button plain style="margin-left: 10px" @click="onTransformInput('-')">-</el-button>
                    <el-button plain @click="onTransformInput('+')">+</el-button>
                </el-col>
            </el-row>
        </div>
        <div v-if="big_div_if" :style="{width: 'auto','margin-left': 'auto','margin-right': 'auto'}" v-html="html"/>
    </div>
</template>

<script>
    export default {
        name: "FlowChart",
        props: {
            AllData: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                data: [],
                width: [],
                maxWidth: 0,
                transformInput: 100,
                big_div_if: true,
                html: "",
            }
        },
        created() {
            this.html = this.doDataToHtml([this.AllData], true);
            let data = [];
            for (let i = 0; i < this.AllData.children.length; i++) {
                let item = this.AllData.children[i];
                // data.push([
                //     {
                //         key: item.key,
                //         subTitle: item.subTitle,
                //         subTitleBackground: item.subTitleBackground,
                //         subTitleColor: item.subTitleColor,
                //         title: item.title,
                //         titleBackground: item.titleBackground,
                //         titleColor: item.titleColor,
                //     }, ...this.doChildrenToArray([], item.children)
                // ])
                let array = this.doChildrenToArray([], item.children)
                array.splice(0, 0, {
                    key: item.key,
                    subTitle: item.subTitle,
                    subTitleBackground: item.subTitleBackground,
                    subTitleColor: item.subTitleColor,
                    title: item.title,
                    titleBackground: item.titleBackground,
                    titleColor: item.titleColor,
                })
                data.push(array)
            }
            this.maxWidth = 0;
            this.width = [];
            for (let i = 0; i < data.length; i++) {
                this.width[i] = (data[i].length - 1) * 320;
                this.maxWidth += (data[i].length - 1) * 320;
            }
            this.data = data;
        },
        mounted() {
            // document.getElementById("big").scrollLeft = (document.getElementById("big-div").clientWidth
            //     - document.getElementById("big").clientWidth) / 2
        },
        methods: {
            doChildrenToArray(children, data) {
                for (let i = 0; i < data.length; i++) {
                    if (children.length) {
                        let key = children[children.length - 1][0].key.split('_');
                        let key1 = data[i].key.split('_');
                        if (key1[1] === key[1]) {
                            children[children.length - 1].push({
                                    key: data[i].key,
                                    subTitle: data[i].subTitle,
                                    subTitleBackground: data[i].subTitleBackground,
                                    subTitleColor: data[i].subTitleColor,
                                    title: data[i].title,
                                    titleBackground: data[i].titleBackground,
                                    titleColor: data[i].titleColor,
                                }
                            )
                        } else {
                            children.push([{

                                    key: data[i].key,
                                    subTitle: data[i].subTitle,
                                    subTitleBackground: data[i].subTitleBackground,
                                    subTitleColor: data[i].subTitleColor,
                                    title: data[i].title,
                                    titleBackground: data[i].titleBackground,
                                    titleColor: data[i].titleColor,
                                }]
                            )
                        }
                    } else {
                        children.push(
                            [
                                {
                                    key: data[i].key,
                                    subTitle: data[i].subTitle,
                                    subTitleBackground: data[i].subTitleBackground,
                                    subTitleColor: data[i].subTitleColor,
                                    title: data[i].title,
                                    titleBackground: data[i].titleBackground,
                                    titleColor: data[i].titleColor,
                                }
                            ]
                        );
                    }
                    if (data[i].children.length) {
                        children = this.doChildrenToArray(children, data[i].children)
                    }
                }
                return children;
            },
            onTransformInput(key) {
                if (key === "-") {
                    if (+this.transformInput > 10) {
                        this.transformInput = +this.transformInput - 10;
                    } else {
                        this.$message.error("缩放不能小于10！");
                    }
                } else if (key === "+") {
                    if (+this.transformInput > 90) {
                        this.$message.error("缩放不能大于100！");
                        this.transformInput = 100;
                    } else {
                        this.transformInput = +this.transformInput + 10;
                    }
                } else {
                    if (+this.transformInput < 10) {
                        this.$message.error("缩放不能小于10！");
                        this.transformInput = 10;
                    } else if (+this.transformInput > 100) {
                        this.$message.error("缩放不能大于100！");
                        this.transformInput = 100;
                    } else {
                        this.transformInput = +this.transformInput;
                    }
                }
                // this.maxWidth = this.maxWidth * (this.transformInput / 100);
                document.getElementById("big-div").style.transform = 'scale(' + (this.transformInput / 100) + ')';
                document.getElementById("big-div").style.marginLeft = 'auto';
                document.getElementById("big-div").style.marginTop = 'auto';
            },
            doDataToHtml(data, isOne) {
                let html = "";
                html += "<div style='display: flex;justify-content:center'>"
                for (let i = 0; i < data.length; i++) {
                    html += "<div>";
                    if (!isOne) {
                        if (data.length - 1 === i) {
                            html += "<div style=\"width:1px;height:30px;background:black;margin-left:'50%'\">"
                            html += "</div>"
                        } else {
                            let width = this.doMaxWidth(data[i].children) + this.doMaxWidth(data[i + 1].children) + 320;
                            html += "<div style='width:" + width + "px;height:30px;border-left:1px black solid;border-top:1px black solid;margin-left:"+(width / 2)+"px'>"
                            html += "</div>"
                        }
                    }
                    html += "<div style='width:300px;margin:0px 10px'>" +
                        "<div style='" + (data[i].titleBackground ? ("background:" + data[i].titleBackground + ";") : "") +
                        (data[i].titleColor ? ("color:" + data[i].titleColor + ";") : "") + "padding: 10px;'>" +
                        data[i].title +
                        "</div>" +
                        "<div style='" + (data[i].subTitleBackground ? ("background:" + data[i].subTitleBackground + ";") : "") +
                        (data[i].subTitleColor ? ("color:" + data[i].subTitleColor + ";") : "") + "padding: 10px;'>" +
                        data[i].subTitle +
                        "</div>" +
                        "</div>"
                    html += "</div>";
                }
                for(let i = 0; i < data.length; i++){
                    if (data[i].children.length) {
                        html += this.doDataToHtml(data[i].children, false);
                    }
                }
                html += "</div>"
                return html;
            },
            doMaxWidth(data) {
                let width = data.length > 1 ? (data.length - 1) * 320 : 0;
                for (let i = 0; i < data.length; i++) {
                    width += data[i].children.length ? this.doMaxWidth(data[i].children) : 0;
                }
                return width;
            },
        }
    }
</script>

<style scoped>
    .card-title {
        margin: -20px !important;
        padding: 10px 20px !important;
    }

    .card-subTitle {
        margin: -20px !important;
        padding: 10px 20px !important;
        margin-top: 10px !important;
    }
</style>